const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case ActionType.SET_IS_LOADING:
      return {
        ...state,
        isLoading: action.isLoading,
      };
    ...
};

const [state, dispatch] = useReducer(reducer, initialState);
// const [state,setState]=useState()와 유사해

type State = {
  isLoading: boolean;
  data: CarType[];
  error: string;
};

type Action =
  | { type: ActionType.SET_DATA; data: CarType[] }
  | { type: ActionType.SET_IS_LOADING; isLoading: boolean }
  | { type: ActionType.SET_ERROR; error: string };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case ActionType.SET_IS_LOADING:
      return {
        ...state,
        isLoading: action.isLoading,
      };
    case ActionType.SET_DATA:
      return {
        ...state,
        data: action.data,
      };
    case ActionType.SET_ERROR:
      return {
        ...state,
        error: action.error,
      };
    default:
      throw new Error('Unknown Action');
  }
};

export const CarsProvider = ({ children }: { children: React.ReactNode }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
		...
};

type State = {
  isLoading: boolean;
  data: CarType[];
  error: string;
};

type Action =
  | { type: ActionType.SET_DATA; data: CarType[] }
  | { type: ActionType.SET_IS_LOADING; isLoading: boolean }
  | { type: ActionType.SET_ERROR; error: string };

type CarsDistpatch = Dispatch<Action>;

export const CarsStateContext = createContext<State | null>(initialState);
export const CarsDispatchContext = createContext<CarsDistpatch | null>(null);

export const CarsProvider = ({ children }: { children: React.ReactNode }) => {
		...
    return (
    <CarsStateContext.Provider value={state}>
      <CarsDispatchContext.Provider value={dispatch}>
        {children}
      </CarsDispatchContext.Provider>
    </CarsStateContext.Provider>
  );
};

enum ActionEnum {
  SET_IS_LOADING = "SET_IS_LOADING",
  SET_DATA = "SET_DATA",
  SET_ERROR = "SET_ERROR",
}

const App = () => {
  const dispatch = useCarsDispatch()
  const getList = useCallback(async () => {
    dispatch({ type: ActionType.SET_IS_LOADING, isLoading: true })
    try {
      const response = await carsAPI.getCars()
      if (response) {
        dispatch({ type: ActionType.SET_DATA, data: response?.payload })
      }
    } catch (e) {
      if (e instanceof HTTPError) {
        dispatch({ type: ActionType.SET_ERROR, error: e.errorMessage })
      }
      console.error(e)
    } finally {
      dispatch({ type: ActionType.SET_IS_LOADING, isLoading: false })
    }
  }, [dispatch])
  useEffect(() => {
    getList()
  }, [getList])

  return (
    <>
      <Header />
      <Outlet />
    </>
  )
}

export default App

//categoryContext.tsx
import { createContext, useState, useMemo } from "react"
import { CategoryType } from "types/CarsInterface"

const initialState = {
  category: "전체",
  setCategory: (category: CategoryType) => {},
}

export const CategoryContext = createContext(initialState)

export const CategoryProvider = ({
  children,
}: {
  children: React.ReactNode
}) => {
  const [category, setCategory] = useState<CategoryType>("전체")
  const value = useMemo(() => ({ category, setCategory }), [category])
  return (
    <CategoryContext.Provider value={value}>
      {children}
    </CategoryContext.Provider>
  )
}

//router.tsx
const Router = () => {
  return (
    <CarsProvider>
      <RouterProvider router={router} />
    </CarsProvider>
  )
}

//

const Home = () => {
  return (
    <CategoryProvider>
      <S.Section>
        <Categories />
        <CarList />
      </S.Section>
    </CategoryProvider>
  )
}

export default Home

//useCars.tsx

export const useCarsState = () => {
  const state = useContext(CarsStateContext)
  if (!state) throw new Error("Can't find State Provider")
  return state
}

export const useCarsDispatch = () => {
  const dispatch = useContext(CarsDispatchContext)
  if (!dispatch) throw new Error("Can't find Dispatch Provider")
  return dispatch
}

export const useCarsValue = () => {
  const state = useCarsState()
  const { category } = useContext(CategoryContext)

  if (!state) throw new Error("Can't find StateProvider")
  if (!category) throw new Error("Can't find CategoryProvider")
  if (category === "전체") return state.data

  const filterd = state?.data.filter(
    car => SegmentEnum[car.attribute.segment] === category
  )
  return filterd
}

//carsList.tsx
import S from "./styles"
import CarItem from "../carItem/CarItem"
import { useCarsState, useCarsValue } from "../../hooks/useCars"

const CarList = () => {
  const { isLoading, error } = useCarsState()
  const data = useCarsValue()
  if (isLoading) {
    return (
      <S.Layout>
        <h3>불러오는 중</h3>
      </S.Layout>
    )
  }

  if (error) {
    return (
      <S.Layout>
        <h3>{error}</h3>
      </S.Layout>
    )
  }

  if (data.length === 0) {
    return (
      <S.Layout>
        <h3>차량이 없습니다.</h3>
      </S.Layout>
    )
  }
  return (
    <ul>
      {data.map(car => (
        <CarItem key={car.id} {...car} />
      ))}
    </ul>
  )
}

export default CarList

enum SegmentEnum {
  C = "소형",
  D = "중형",
  E = "대형",
  SUV = "SUV",
}

type AttributeType = {
  segment: keyof typeof SegmentEnum
}

export const useCarsValue = () => {
  //	...
  const filterd = state?.data.filter(
    car => SegmentEnum[car.attribute.segment] === category
  )
  return filterd
}

const Detail = () => {
  const { id } = useParams()
  const car = data.find(item => item.id === +id)

  //	...

  if (!car) {
    return (
      <S.Layout>
        <h3>url을 확인해주세요</h3>
      </S.Layout>
    )
  }

  const { amount, attribute, startDate, insurance, additionalProducts } = car

  // ..
}

export default Detail

import { Helmet } from "react-helmet-async"

const Meta = ({ attribute, amount, id }: MetaProps) => {
  const { brand, name, imageUrl } = attribute
  return (
    <Helmet>
      <title>{`${brand} ${name}`}</title>
      <meta name="description" content={`월 ${amount}원`} />
      <meta property="og:type" content="website" />
      <link href={imageUrl} />
      <meta property="og:url" content={`${process.env.PUBLIC_URL}/${id}`} />
      <meta name="og:title" content={`${brand} ${name}`} />
      <meta name="og:description" content={`월 ${amount.toLocaleString()}원`} />
      <meta property="og:image" content={imageUrl} />
      <meta property="og:image:width" content={IMAGE_SIZE.width.toString()} />
      <meta property="og:image:height" content={IMAGE_SIZE.height.toString()} />
    </Helmet>
  )
}

import { hydrate, render } from "react-dom"

const container = document.getElementById("root") as HTMLElement
const root = ReactDOM.createRoot(container)

if (container.hasChildNodes()) {
  ReactDOM.hydrateRoot(
    container,
    <React.StrictMode>
      <ThemeProvider theme={Theme}>
        <GlobalStyle />
        <Router />
      </ThemeProvider>
    </React.StrictMode>
  )
} else {
  root.render(
    <React.StrictMode>
      <ThemeProvider theme={Theme}>
        <GlobalStyle />
        <Router />
      </ThemeProvider>
    </React.StrictMode>
  )
}

import axios, { AxiosError, AxiosInstance } from "axios"
import { CarType, FuelEnum, SegmentEnum } from "types/CarsInterface"
import createAxiosInstance from "./axiosUtils"
import HTTPError from "../network/httpError"

const BASE_URL = "https://preonboarding.platdev.net/api/cars"

type GetCarsResponse = {
  payload: CarType[]
}

class CarsAPI {
  constructor(private axiosInstance: AxiosInstance) {}

  async getCars(fuelType?: FuelEnum, segment?: SegmentEnum) {
    try {
      const { data } = await this.axiosInstance.get<GetCarsResponse>(BASE_URL, {
        params: {
          fuelType,
          segment,
        },
      })
      return data
    } catch (error) {
      const { response } = error as unknown as AxiosError
      if (response) {
        throw new HTTPError(response?.status, response?.statusText)
      }
      throw new Error("Unknown Error")
    }
  }
}

const carsAPIinstance = createAxiosInstance(BASE_URL)

const carsAPI = new CarsAPI(carsAPIinstance)

export default carsAPI

export default class HTTPError extends Error {
  constructor(private statusCode: number, public message: string) {
    super(message)
  }

  get errorMessage() {
    switch (this.statusCode) {
      case 404:
        this.message = "잘못된 요청입니다. url을 확인해주세요"
        break
      default:
        throw new Error("Unknown Error")
    }
    return this.message
  }
}